import React, { useState, useEffect } from 'react'
import { Card, Space, Tabs } from 'antd';
import type { TabsProps } from 'antd';
import axios from 'axios';
import styles from './list.module.css'
export default function Index() {
  const [list, setList] = useState([])

  const getList = async () => {
    const res = await axios.get('/api/article/list')
    console.log(res.data.rows);
    setList(res.data.rows)

  }
  useEffect(() => {
    getList()
  }, [])
  const onChange = (key: string) => {
    console.log(key);
  };
  const items: TabsProps['items'] = [
    {
      key: '1',
      label: '首页',
      children: 'Content of Tab Pane 1',
    },
    {
      key: '2',
      label: '热搜',
      children: 'Content of Tab Pane 2',
    },
    {
      key: '3',
      label: '小说',
      children: 'Content of Tab Pane 3',
    },
    {
      key: '4',
      label: '电影',
      children: '电影',
    },
    {
      key: '5',
      label: '电视剧',
      children: '电视剧',
    },
  ];
  return (
    <div>
      <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
      <div className={styles.box}>
        <p style={{ color: '#ccc' }}>热搜榜/</p>
        <p style={{ color: '#ccc' }}>全部类型</p>
      </div>
      <div>
        {
          list.map((item, ind) => {
            return <Space direction="vertical" size={16}>
              <Card title={item.title}  style={{ width: 300 }}>
                <p>{item.createdAt}</p>
              </Card>
             
            </Space>
          })
        }
      </div>
    </div>
  )
}
